<template>
	<div class="zidong">
		<div class="flex">
			<el-select v-model="search.channel_id" style="width: 300px;" placeholder="渠道">
				<el-option :label="item.c_name" :value="item.id" v-for="item in qudaolist" :key="item.id"></el-option>
			</el-select>
			<el-button size="small" type="danger" style="margin-left: 20px;" @click="getlist()">检索</el-button>
			
		
			
			
		</div>
		<el-button size="small" type="danger" style="margin-top: 20px;" @click="log = true">添加自动生产商品</el-button>
		<el-table :data="list" border style="width: 100%; margin-top: 20px;" v-loading="loading">
			<el-table-column label="渠道名称">
				<template slot-scope="scope">
					{{ scope.row.c_name }}
				</template>
			</el-table-column>

			<el-table-column label="上游产品编码">
				<template slot-scope="scope">
					{{ scope.row.upstream_product_name }}
				</template>
			</el-table-column>
			<el-table-column label="本地产品名称">
				<template slot-scope="scope">
					{{ scope.row.name }}
				</template>
			</el-table-column>
			<el-table-column label="本地产品编码">
				<template slot-scope="scope">
					{{ scope.row.sku }}
				</template>
			</el-table-column>
			
			<el-table-column label="操作">
				<template slot-scope="scope">
					<div style="display: flex;">
						<el-button type="text" @click="shanchu(scope.row.up_id)">删除</el-button>
						<el-button type="text" @click="xiugai(scope.row)">修改</el-button>
						<!-- <el-button type="text" @click="chakan(scope.row)">查看</el-button> -->
						<!-- <div @click="chuanid(scope.row.up_id)" v-if="scope.row.y_name == 'lvhuana-zop'">
							<upload-excel-component2 @on-selected-file="exportData2" class="btnp" :buttonName="export_data"></upload-excel-component2>
						</div>
						<el-button  v-if="scope.row.y_name == 'lvhuana-zop'"  type="text"  @click="xiazaimoban">下载导入模板</el-button> -->
					</div>
					
				</template>
			</el-table-column>
		</el-table>
		
		<el-dialog title="添加自动生产商品" :visible.sync="log" width="400px" :close-on-click-modal="false">
			<el-select v-model="zidong.channel_id" style="width: 360px; margin-bottom: 20px;" placeholder="渠道" @change="changechannel">
				<el-option :label="item.c_name" :value="item.id" v-for="(item,index) in qudaolist" :key="item.id"></el-option>
			</el-select>
			<div style=" margin-bottom: 20px;">
				<el-input v-model="zidong.product_sku"  placeholder="本地编码"></el-input>
			</div>
			<div style=" margin-bottom: 20px;">
				<el-input v-model="zidong.upstream_sku" placeholder="对应的上游编码"></el-input>
			</div>
			
			<el-button size="medium" type="primary" style=" margin-bottom: 20px;" @click="jiance">检测</el-button>
	
			<div v-if="zhuangtai" style=" margin-bottom: 20px;">{{zhuangtai}}</div>

			
			<div v-for="(item,index) in this.zidong.upstream_config_type" :key="index">
				
				<div style=" margin-bottom: 20px;" v-if="item.type == 'text'">
					<el-input v-model="canshu[item.key]" :placeholder="item.name"></el-input>
				</div>
				
				<div v-if="item.type == 'radio'">
					<div style="color: #EEF7FF; margin-bottom: 20px;">{{item.name}}:</div>
					<el-radio-group v-model="canshu[item.key]" style="margin-bottom: 20px;">
					    <el-radio :label="item2.value" v-for="item2 in item.data" :key="item2.value" style="margin-bottom: 10px;">{{item2.name}}</el-radio>
					</el-radio-group>
				</div>
				
			</div>
			
			<!-- <div v-if="zidong.upstream_config_type == 3">
				
				<el-radio-group v-model="zidong.num_address_type" style="margin-bottom: 20px;">
				    <el-radio :label="1" style="margin-bottom: 10px;">根据收货地址自动选择</el-radio>
				    <el-radio :label="2">输入运营商提供的省市区指定编码</el-radio>
				  </el-radio-group>
				  
				<div style=" margin-bottom: 20px;">
					<el-input v-model="zidong.province_name" placeholder="省名称"></el-input>
				</div>
				<div style=" margin-bottom: 20px;">
					<el-input v-model="zidong.province_code" placeholder="省编码"></el-input>
				</div>
				<div style=" margin-bottom: 20px;">
					<el-input v-model="zidong.city_name" placeholder="市名称"></el-input>
				</div>
				<div style=" margin-bottom: 20px;">
					<el-input v-model="zidong.city_code" placeholder="市编号"></el-input>
				</div>
			</div> -->
			
			
			
			<div slot="footer" class="dialog-footer">
				<el-button size="medium" type="primary" @click="addpro">确认</el-button>
			</div>
		</el-dialog>
		<el-dialog title="添加自动生产商品" :visible.sync="log2" width="400px" :close-on-click-modal="false">
			<el-select v-model="zidong.channel_id" style="width: 360px; margin-bottom: 20px;" placeholder="渠道" @change="changechannel">
				<el-option :label="item.c_name" :value="item.id" v-for="(item,index) in qudaolist" :key="item.id"></el-option>
			</el-select>
			<div style=" margin-bottom: 20px;">
				<el-input v-model="zidong.product_sku"  placeholder="本地编码"></el-input>
			</div>
			<div style=" margin-bottom: 20px;">
				<el-input v-model="zidong.upstream_sku" placeholder="对应的上游编码"></el-input>
			</div>
			
			<el-button size="medium" type="primary" style=" margin-bottom: 20px;" @click="jiance">检测</el-button>
				
			<div v-if="zhuangtai" style=" margin-bottom: 20px;">{{zhuangtai}}</div>
			
			<div v-for="(item,index) in this.zidong.upstream_config_type" :key="index">
				
				<div style=" margin-bottom: 20px;" v-if="item.type == 'text'">
					<el-input v-model="canshu[item.key]" :placeholder="item.name"></el-input>
				</div>
				
				<div v-if="item.type == 'radio'">
					<div style="color: #EEF7FF; margin-bottom: 20px;">{{item.name}}:（修改请重新选择一次）</div>
					<el-radio-group v-model="canshu[item.key]" style="margin-bottom: 20px;">
					    <el-radio :label="item2.value" v-for="item2 in item.data" :key="item2.value" style="margin-bottom: 10px;">{{item2.name}}</el-radio>
					</el-radio-group>
				</div>
				
			</div>
			
			<!-- <div v-for="(item,index) in this.zidong2" :key="index">
				<div style=" margin-bottom: 20px;" v-if="item.name != 'id' && item.name != 'created_at' && item.name != 'updated_at'">
					<el-input v-model="item.val" :placeholder="item.name"></el-input>
				</div>
				
				<div v-if="item.type == 'radio'">
					<div style="color: #EEF7FF; margin-bottom: 20px;">{{item.name}}:</div>
					<el-radio-group v-model="canshu[item.key]" style="margin-bottom: 20px;">
					    <el-radio :label="item2.value" v-for="item2 in item.data" :key="item2.value" style="margin-bottom: 10px;">{{item2.name}}</el-radio>
					</el-radio-group>
				</div>
				
			</div> -->
			<div slot="footer" class="dialog-footer">
				<el-button size="medium" type="primary" @click="addpro2">确认修改</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
	
	import axios from "axios";
	import UploadExcelComponent2 from "@/components/UploadExcel/index.vue";
	export default {
		components: {
			UploadExcelComponent2,
		},
		name: 'zidong',
		data() {
			return {
				loading:true,
				search:{
					channel_id:""
				},
				list:"",
				qudaolist: "",
				zidong: {
					product_sku: "",
					upstream_sku: "",
					channel_id: "",
					upstream_config_type:"",
					y_name:"",
					num_address_type:1,
					upstream_product_name:"",
					province_name:"",
					province_code:"",
					city_name:"",
					city_code:""
				},
				log: false,
				zhuangtai:"",
				canshu:{},
				export_data:"导入",
				url:"",
				log2:false,
				zidong2:[],
				shop:""
			}
		},
		async created() {
			await this.getqudao()
			this.shop = JSON.parse(localStorage.getItem('SHOP'))
			
			this.getlist()
			//地址配置,用于下载模板
			if (window.location.href.indexOf("91haoka_platform") > -1) {
				console.log("线上项目，谨慎操作。")
				this.url = window.location.origin + "/91haoka_platform/"
			} else {
				this.url = ""
			}
		},
		methods: {
			xiugai:function(item){
				
				
				axios.get('/api/plan-market/upstream/get/product/info?id='+item.up_id)
					.then(response => {
						if (response.data.msg.code == 0) {
							
							this.zidong.channel_id = response.data.data.channel_id
							for(let i in this.qudaolist){
								if(this.zidong.channel_id == this.qudaolist[i].id){
									if(this.qudaolist[i].upstream_config_type != ''){
										this.zidong.upstream_config_type = JSON.parse(this.qudaolist[i].upstream_config_type) 
										this.canshu = JSON.parse(this.qudaolist[i].upstream_config_type) 
									}else{
										this.zidong.upstream_config_type = []
									}

									this.zidong.y_name = this.qudaolist[i].y_name
								}
							}
							this.zidong.product_sku = response.data.data.product_sku
							this.zidong.upstream_sku = response.data.data.upstream_sku
							this.zidong.up_id = response.data.data.id
							console.log(response.data.data.datas)
							console.log(this.zidong.upstream_config_type)
							
							let dd = JSON.parse(response.data.data.data)
							for(let i in dd){
								this.$set(this.canshu,i,dd[i])
							}
							
							// this.zidong = response.data.data
							// console.log(this.zidong)
							// this.log2 = true
							// this.zidong2 = []
							// for(let i in response.data.data){
							// 	this.zidong2.push(
							// 		{name:i,val:response.data.data[i]}
							// 	)
								
							// }
							// console.log(this.zidong2)
							this.log2 = true
						} else {
							this.$message.error(response.data.msg.info);
						}
					})
				// this.zidong.id = item.id
				// this.zidong.channel_id = item.channel_id
				// this.zidong.product_sku = item.sku
				// this.zidong.upstream_sku = item.upstream_product_name
				// this.log = true
				// <el-select v-model="zidong.channel_id" style="width: 360px; margin-bottom: 20px;" placeholder="渠道" @change="changechannel">
				// 	<el-option :label="item.c_name" :value="item.id" v-for="(item,index) in qudaolist" :key="item.id"></el-option>
				// </el-select>
				// <div style=" margin-bottom: 20px;">
				// 	<el-input v-model="zidong.product_sku"  placeholder="本地编码"></el-input>
				// </div>
				// <div style=" margin-bottom: 20px;">
				// 	<el-input v-model="zidong.upstream_sku" placeholder="对应的上游编码"></el-input>
				// </div>
				
			},
			chakan:function(item){
				var news = this.$router.resolve({path: '/order_production/zidongdetail',query:{id:item.up_id}})
				console.log(news)
				window.open(news.href,'_blank')
			},
			cons:function(){
				
			},
			chuanid:function(id){
				console.log(id)
				this.$emit("getshangchuanid",id)
				
			},
			
			xiazaimoban:function(){
				const a = document.createElement('a');
				a.setAttribute('download', '省触点编码模板.xlsx');
				a.setAttribute('href', this.url + 'static/moban/shengchudianbianma.xlsx');
				a.click();
			},
			changechannel:function(){
				for(let i in this.qudaolist){
					if(this.zidong.channel_id == this.qudaolist[i].id){
						if(this.qudaolist[i].upstream_config_type != ''){
							this.zidong.upstream_config_type = JSON.parse(this.qudaolist[i].upstream_config_type) 
						}else{
							this.zidong.upstream_config_type = []
						}
						console.log(this.zidong.upstream_config_type)
						this.zidong.y_name = this.qudaolist[i].y_name
					}
				}
			},
			jiance:function(){
				axios.get('/api/plan-market/upstream/check/product?product_sku='+this.zidong.product_sku)
					.then(response => {
						if (response.data.msg.code == 0) {
							if(response.data.data == null){
								this.zhuangtai = "未设置过自动生产，点确定设置吧！"
							}else{
								this.zhuangtai = "已设置过自动生产，对应的编码为"+response.data.data.upstream_product_name+"点确认设置将会替换！"
							}
						} else {
							this.$message.error(response.data.msg.info);
						}
					})
			},
			//获取渠道
			getqudao:async function() {
					await axios.get('/api/plan-market/upstream/get/channel')
						.then(response => {
							if (response.data.msg.code == 0) {
								this.qudaolist = response.data.data
								console.log(0)
							} else {
								this.$message.error(response.data.msg.info);
							}
						})
			},
			//获取列表
			getlist: function() {
				axios.get(`/api/plan-market/upstream/product/list?channel_id=${this.search.channel_id}`)
					.then(response => {
						if (response.data.msg.code == 0) {
							this.list = response.data.data
							this.loading = false
						} else {
							this.$message.error(response.data.msg.info);
						}
					})
			},
			//添加更新
			addpro:function(){
				
				let data = {}
				data['product_sku'] = this.zidong.product_sku
				data['upstream_sku'] = this.zidong.upstream_sku
				data['channel_id'] = this.zidong.channel_id
				data['y_name'] = this.zidong.y_name

				for(let i in this.zidong.upstream_config_type){
					data[this.zidong.upstream_config_type[i].key] = this.canshu[this.zidong.upstream_config_type[i].key]
				}

				
				axios.post('/api/plan-market/upstream/product/create',data)
					.then(response => {
						if (response.data.msg.code == 0) {
							this.log = false
							this.$message.success('添加成功');
							this.getlist()
						} else {
							this.$message.error(response.data.msg.info);
						}
					})
			},
			addpro2:function(){
				
				let data = {}
				data['product_sku'] = this.zidong.product_sku
				data['upstream_sku'] = this.zidong.upstream_sku
				data['channel_id'] = this.zidong.channel_id
				data['y_name'] = this.zidong.y_name
				data['up_id'] = this.zidong.up_id
			
				for(let i in this.zidong.upstream_config_type){
					data[this.zidong.upstream_config_type[i].key] = this.canshu[this.zidong.upstream_config_type[i].key]
				}
			
				
				axios.post('/api/plan-market/upstream/product/create',data)
					.then(response => {
						if (response.data.msg.code == 0) {
							this.log2 = false
							this.$message.success('修改成功');
							this.getlist()
						} else {
							this.$message.error(response.data.msg.info);
						}
					})
			},
			
			shanchu:function(id){
				this.$confirm('删除产品影响订单生产，请确保没有该产品的订单需要生产再删除产品?', '提示', {
				          confirmButtonText: '确定',
				          cancelButtonText: '取消',
				          type: 'warning'
				        }).then(() => {
				          axios.post('/api/plan-market/upstream/product/delete',{id:id})
				          	.then(response => {
				          		if (response.data.msg.code == 0) {
				          			this.loading = true
				          			this.getlist()
				          		} else {
				          			this.$message.error(response.data.msg.info);
				          		}
				          	})
				        })
				
					
			}
		}
	}
</script>

<style lang="scss" scoped>
	.zidong {
		padding: 20px;

		.flex {
			display: flex;
		}
	}
</style>
